<?php

$provincearr = select_from_db(array('name'),array('province'),array("mapname='$mapid'"));

//print_r($provincearr);

$jsstring = "<form id='options'>
		<h3 id='neighborh3'>Add neighbors</h3>
			<input type='button' value='done' id='finishneighborbutton'/>
		</form>
		<canvas id='canvas' width='960px' height='804px' style='position: absolute'>.</canvas>";

$jsstring .= "<script type='text/javascript'>";

$jsstring .= "
var widthofwindow = $(window).width();
widthofwindow = widthofwindow-960;
windowsize = widthofwindow/2;

var maparray = new Array();
var maparraycount = 0;
";

$dir = opendir("images/$mapid/maps/coords/");

//preload images
$maparrayindex = 0;
while(false != ($file = readdir($dir))){
	if($file != "." && $file != ".."){
		$file = strstr($file, '.', TRUE);
		$jsstring .= "var front$file = new Image(); maparray[$maparrayindex] = front$file; front$file.src = 'images/$mapid/maps/front$file.png';\n";
		$maparrayindex++;
	}
}

$jsstring .= "
function nextProvince(){
	drawMap(maparray[maparraycount]);
}
";

$jsstring .= "
function drawMap(drawprovince){
	context = document.getElementById('canvas').getContext('2d');
	//context.clearRect(0,0,960,804);
	var img = new Image();
	img.src = 'images/sweetland/maps/frontBudapest.png';
	console.debug(img);
	context.drawImage(frontBudapest, 0, 0);
}
";

$jsstring .= "$('#canvas').click(function(e){
	var X = e.pageX - windowsize;
	var Y = e.pageY - 160;
	$.post('controller/findprovince.php', {'x' : X, 'y' : Y, 'map' : '$mapid'},
		function(whatprovince){
			console.debug(whatprovince);
		});
});";

$jsstring .= "nextProvince();</script>";

echo $jsstring;
?>